<template>
	<view class="content">

		<!-- 设置两张背景图片 -->
		<view class="container"></view>

		<!-- 卡片容器 -->
		<view class="cardContainer">
			<!-- 浮在背景图片上的邀请新用户卡片 -->
			<view class="card">
				<text class="invateTitle">邀请新用户</text>
				<text style="margin: 12px 0 6px;">您的邀请码为</text>
				<text style="color: #f00;font-size: 1.5em;">{{user.phone}}</text>
				<hr style="width: 80%; margin: 6px 0;">
				<!-- 二维码 -->
				<view @longpress="handleLongPress">
					<canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;margin: 0 auto;"></canvas>

					<text style="margin: 0 0 5px;font-size: 1.1em;">长按图片即可保存个人专属二维码</text>
				</view>
			</view>

			<!-- 分享此链接 -->
			<text class="share">分享此链接 </text>

			<!-- 邀请攻略步骤 -->
			<view class="invationGuide">
				<text class="invationGuideTitle">邀请攻略</text>
				<!-- 邀请攻略里的步骤内容 -->
				<view class="invationGuideContent">
					<view class="step">
						<image class="img" src="../../../static/share1.svg"></image>
						<text class="stepContent">1、点击按钮，分享链接</text>
					</view>
					<view class="step">
						<image class="img" src="../../../static/share2.png"></image>
						<text class="stepContent">2、好友通过您分享的链接，进行授权注册成功</text>
					</view>
					<view class="step" style="margin-bottom: 15px;">
						<image class="img" src="../../../static/coupon.png"></image>
						<text class="stepContent">3、您将获得奖励</text>
					</view>
				</view>

			</view>

			<!-- 我的邀请数据 -->
			<view class="data">
				<text class="dataTitle">我的邀请数据</text>
				<!-- 邀请人数和奖励 :showBorder="false"-->
				<view class="grid">
					<view class="item">
						<text class="text">成功邀请人</text>
						<text>{{invation.number}}</text>
					</view>
					<view class="item">
						<text class="text">奖励积分</text>
						<text>{{invation.integral}}</text>
					</view>
				</view>
				<!-- 分割线 -->
				<u-divider text="我已邀请的好友列表" textSize="1.2em"></u-divider>
				<!-- 好友列表 -->
				<text v-if="Isinvation==true" style="color: #333; font-size: 0.8rem;margin-bottom: 20px;">暂无数据</text>
				<!-- <text >{{invation.number==0?'暂无数据':''}}</text> -->
				<view class="dataList" v-for="item in invation.list">
					<!-- 如果邀请好友数组长度为0则显示暂无数据 -->
					<view class="left">
						<image class="avatar" :src="item.avatar"></image>
						<text class="nickname">{{item.name}}</text>
					</view>
					<text class="time">{{item.createTime}}</text>
				</view>


			</view>
		</view>

	</view>
</template>

<script>
	import UQRCode from 'uqrcodejs';
	import findingApi from '../../../common/FindingService/FindingApi';
	import app from '../../../App.vue'

	export default {
		data() {
			return {
				userId: '',
				user: [],
				// 邀请数据
				invation: '',
				// 邀请成功数量,为0是true
				Isinvation: '',
				tempFilePath: '',
			}
		},
		// 二维码onReady是uniapp里的生命周期
		onReady() {
			// 获取uQRCode实例
			var qr = new UQRCode();
			// 设置二维码内容
			// qr.data =this.user.phone;
			// 可下载app（手机自带浏览器和qq扫一扫
			qr.data = 'https://www.gclive.cloud/api/v1/file/apk/latest' + this.user.phone
			// 设置二维码大小，必须与canvas设置的宽高一致
			qr.size = 200;
			// 调用制作二维码方法
			qr.make();
			// 获取canvas上下文
			var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
			// 设置uQRCode实例的canvas上下文
			qr.canvasContext = canvasContext;
			// 调用绘制方法将二维码图案绘制到canvas上
			qr.drawCanvas();

			// 导出临时文件路径
			uni.canvasToTempFilePath({
				canvasId: 'qrcode',
				fileType: this.fileType,
				width: this.canvasWidth,
				height: this.canvasHeight,
				success: res=>{
					this.tempFilePath = res.tempFilePath

					
				},
				fail: err => {
					console.log(err);
				}
			}, );

		},
		mounted() {
			this.queryFriends()
			this.user = uni.getStorageSync('user');
			console.log('用户电话号码', this.user)
		},

		methods: {
			handleLongPress(event) {
				// app。保存二维码到本地相册.必须在导出临时文件路径成功后再执行保存
				uni.saveImageToPhotosAlbum({
					filePath: this.tempFilePath,
					success: function() {
						uni.showToast({
							title: '长按保存成功',
							icon: 'success',
						});
					}
				});
				
				// H5浏览器页面下载
				const aEle = document.createElement('a');
				aEle.download = 'uQRCode'; // 设置下载的文件名，默认是'下载'
				aEle.href = this.tempFilePath;
				document.body.appendChild(aEle);
				aEle.click();
				aEle.remove();
				
			},
			// 获取邀请好友列表和所获积分
			queryFriends() {
				// 从本地缓存中同步获取指定 userId 对应的内容。
				this.userId = uni.getStorageSync('userId');
				console.log('用户id', this.userId)
				uni.request({
					url: 'http://43.136.172.73/api/v1/activity/load',
					data: {
						userId: this.userId
					},
					header: {
						"Authorization": "sfsdf" //自定义请求头信息
					},
					success: (res) => {
						console.log('查询邀请好友列表：', res.data.data)
						this.invation = res.data.data
						if (res.data.data.number == 0) {
							this.Isinvation = true
						} else {
							this.Isinvation = false
						}

						for (var i = 0; i < this.invation.list.length; i++) {
							this.invation.list[i].createTime = this.invation.list[i].createTime.split('T')[0]
							// console.log(this.invation.list[i].createTime)
						}
					}
				});
			},

		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;

		.container {
			/* 设置容器为全屏 */
			width: 100vw;
			height: 35vh;
			/* 设置第一张背景图 */
			background-image: url('../../../static/InvitationPoints.png');
			/* 设置背景图片大小为铺满容器*/
			background-size: cover;
			background-repeat: no-repeat;
			z-index: -1;

		}

		/* 可以添加额外的样式来设置第二张背景图 */
		.container::before {
			z-index: -1;
			content: "";
			position: absolute;
			top: 35vh;
			left: 0;
			width: 100%;
			height: 100%;
			/* 设置第二张背景图 */
			background-image: url('../../../static/bg.jpg');
			background-size: cover;
			// 边框模糊
			border: 1px solid transparent;
			filter: blur(1px);
			background-repeat: no-repeat;
		}

		.cardContainer {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: -15%;

			/* 邀请新用户和二维码 */
			.card {
				width: 80%;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
				border-radius: 6px;

				.invateTitle {
					background-color: coral;
					color: #fff;
					border-radius: 0 0 12px 12px;
					padding: 5px 10px;
				}

			}

			/* 分享此链接 */
			.share {
				color: #fff;
				text-align: center;
				white-space: nowrap;
				padding: 10px 6px;
				font-size: 1.2em;
				border-radius: 8px;
				background-color: orange;
				margin: 40px 0 30px;
			}

			/* 邀请攻略步骤 */
			.invationGuide {
				width: 100%;
				background-color: #fff;
				border-radius: 5px;
				flex-direction: column;


				.invationGuideTitle {
					background-color: #36ab60;
					color: #fff;
					padding: 5px 15px;
					border-radius: 0 0 15px 15px;
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
				}

				.invationGuideContent {
					width: 80%;
					position: relative;
					left: 10%;
					margin-top: 50px;

					.step {
						margin-top: 30px;
						display: flex;
						align-items: center;

						.img {
							width: 35px;
							height: 35px;
							margin: 0 30px;
						}

						.stepContent {
							font-size: 1.1em
						}
					}
				}
			}

			.data {
				width: 100%;
				background-color: #fff;
				margin-top: 80px;
				display: flex;
				flex-direction: column;
				align-items: center;

				.dataTitle {
					color: #fff;
					background-color: #36ab60;
					padding: 5px 15px;
					border-radius: 0 0 15px 15px;

				}

				.grid {
					.item {
						display: flex;
						flex-direction: column;
						align-items: center;
						margin: 20px 40px;

						.text {
							margin-bottom: 20px;
						}
					}
				}

				.dataList {
					width: 70%;
					display: flex;
					align-items: center;
					margin-top: 10px;

					.left {
						display: flex;
						align-items: center;
						width: 70%;

						.avatar {
							width: 50px;
							height: 50px;
							border-radius: 50%;
						}

						.nickname {
							width: 240rpx;
							;
							font-size: 1.2em;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							margin: 0 10px;
						}
					}

					.time {
						width: 30%;
						font-size: 1.1em;
					}
				}

			}
		}
	}
</style>